<script setup lang="ts">
import { ref } from "vue";
import { use{{ pascal_table_name }} } from "./utils/hook";
import { PureTableBar } from "@/components/RePureTableBar";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import SwPlusCrud from "@/components/SwPlusCrud";

// import Delete from "@iconify-icons/ep/delete";
// import EditPen from "@iconify-icons/ep/edit-pen";
// import Refresh from "@iconify-icons/ep/refresh";
// import AddFill from "@iconify-icons/ri/add-circle-line";

defineOptions({
  name: "{{ pascal_table_name }}"
});

const formRef = ref();
const tableRef = ref();
const {
  // form,
  // loading,
  api,
  auth,
  columns,
  searchColumnList,
  operationButtonsProps,
  addOrEditOptions
  // dataList,
  // onSearch,
  // resetForm,
  // openDialog,
  // handleDelete,
  // handleSelectionChange
} = use{{ pascal_table_name }}(tableRef);
</script>

<template>
  <div>
    <SwPlusCrud
      ref="tableRef"
      :columns="columns"
      :api="api"
      :auth="auth"
      :isTree="{{ table_is_tree }}"
      :selection="false"
      :addOrEditOptions="addOrEditOptions"
      :searchColumnList="searchColumnList"
      :operationButtonsProps="operationButtonsProps"
      locale-name="{{ web_locale_name }}"
    />
  </div>
</template>

<style lang="scss" scoped>
:deep(.el-table__inner-wrapper::before) {
  height: 0;
}

.main-content {
  margin: 24px 24px 0 !important;
}

.search-form {
  :deep(.el-form-item) {
    margin-bottom: 12px;
  }
}
</style>
